<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>ws</title>
    </head>
    
    <body>
        <div>发送消息：</div>
        <input type="text" id="myContent">
        <input type="button" value="点我发送" onclick="CHAT.chat()">

        <div>接受消息：</div>
        <div id="receiveMsg" style="background-color: gainsboro;"></div>

        <script type="application/javascript">
            window.CHAT = {
                socket : null,
                init : function() {
                    if (window.WebSocket) {
                        CHAT.socket = new WebSocket("ws://192.168.252.1:8088/ws");
                        CHAT.socket.onopen = function() {
                            console.log("连接建立成功...");
                        };
                        CHAT.socket.onclose = function() {
                            console.log("连接关闭成功...");
                        };
                        CHAT.socket.onerror = function() {
                            console.log("连接发生错误...");
                        };
                        CHAT.socket.onmessage = function(e) {
                            console.log("接受到消息：" + e.data);
                            var receiveMsg = document.getElementById("receiveMsg");
                            var html = receiveMsg.innerHTML;
                            receiveMsg.innerHTML = html+ "</br>" + e.data;
                        }
                    } else {
                        alert("该浏览器不支持wbsocket协议");
                    }
                },
                chat : function() {
                    var msg = document.getElementById("myContent");
                    CHAT.socket.send(msg.value);
                }
            }
            CHAT.init();
        </script>

    </body>

</html>